{% extends "base.html" %}

{% block title %}部署类型 - 项目管理系统{% endblock %}

{% block content %}
<div class="card">
  <div class="card-header card-header-flex">
    <h5>部署类型管理</h5>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">
      <i class="fas fa-plus"></i> 添加新类型
    </button>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th style="width: 60px;">ID</th>
            <th>名称</th>
            <th>描述</th>
            <th style="width: 150px;" class="text-center">操作</th>
          </tr>
        </thead>
        <tbody>
          {% for deploy_type in deploy_types %}
          <tr>
            <td>{{ deploy_type.id }}</td>
            <td>{{ deploy_type.name }}</td>
            <td>{{ deploy_type.description }}</td>
            <td class="text-center">
              <div class="btn-action-group">
                <button type="button" class="btn btn-sm btn-warning edit-btn" data-toggle="modal" data-target="#editModal{{ deploy_type.id }}">
                  <i class="fas fa-edit"></i><span class="btn-text">编辑</span>
                </button>
                <form action="{{ url_for('config_deploy_types') }}" method="post" class="inline-form">
                  <input type="hidden" name="action" value="delete">
                  <input type="hidden" name="id" value="{{ deploy_type.id }}">
                  <button type="submit" class="btn btn-sm btn-danger">
                    <i class="fas fa-trash"></i><span class="btn-text">删除</span>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    
    {% if not deploy_types %}
    <div class="alert alert-info">
      暂无部署类型数据
    </div>
    {% endif %}
  </div>
</div>

<!-- 添加新类型模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addModalLabel">添加部署类型</h5>
      </div>
      <form action="{{ url_for('config_deploy_types') }}" method="post">
        <input type="hidden" name="action" value="add">
        <div class="modal-body">
          <div class="form-group" style="display:flex; align-items:center; margin-bottom:15px;">
            <label for="name" style="min-width:100px; text-align:right; margin-right:10px; margin-bottom:0;">类型名称</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          <div class="form-group" style="display:flex; align-items:center; margin-bottom:15px;">
            <label for="description" style="min-width:100px; text-align:right; margin-right:10px; margin-bottom:0;">描述</label>
            <textarea class="form-control" id="description" name="description" rows="3"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 编辑模态框 -->
{% for deploy_type in deploy_types %}
<div class="modal fade" id="editModal{{ deploy_type.id }}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel{{ deploy_type.id }}" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel{{ deploy_type.id }}">编辑部署类型</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form action="{{ url_for('config_deploy_types') }}" method="post">
        <input type="hidden" name="action" value="edit">
        <input type="hidden" name="id" value="{{ deploy_type.id }}">
        <div class="modal-body">
          <div class="form-group" style="display:flex; align-items:center; margin-bottom:15px;">
            <label for="edit_name{{ deploy_type.id }}" style="min-width:100px; text-align:right; margin-right:10px; margin-bottom:0;">类型名称</label>
            <input type="text" class="form-control" id="edit_name{{ deploy_type.id }}" name="name" value="{{ deploy_type.name }}" required>
          </div>
          <div class="form-group" style="display:flex; align-items:center; margin-bottom:15px;">
            <label for="edit_description{{ deploy_type.id }}" style="min-width:100px; text-align:right; margin-right:10px; margin-bottom:0;">描述</label>
            <textarea class="form-control" id="edit_description{{ deploy_type.id }}" name="description" rows="3">{{ deploy_type.description }}</textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}

<style>
  /* 确保操作按钮在同一行 */
  .btn-action-group {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }
  
  .inline-form {
    margin-left: 2px;
    display: inline-block;
  }
  
  .btn-action-group .btn {
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
  }
  
  .btn-text {
    margin-left: 3px;
    white-space: nowrap;
  }
</style>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
  console.log('页面已加载，检查模态框功能');
  
  // 为添加按钮添加单击事件监听
  $('.btn-primary[data-target="#addModal"]').on('click', function() {
    console.log('添加按钮被点击');
  });
  
  // 为编辑按钮添加单击事件监听
  $('.edit-btn').on('click', function() {
    console.log('编辑按钮被点击', $(this).data('target'));
    // 尝试手动打开模态框
    var targetId = $(this).data('target');
    $(targetId).modal('show');
  });
  
  // 检查Bootstrap的modal函数是否存在
  if (typeof $.fn.modal !== 'function') {
    console.error('Bootstrap modal功能不可用');
    alert('模态框功能不可用，请检查Bootstrap库是否正确加载');
  } else {
    console.log('Bootstrap modal功能可用');
  }
  
  // 添加模态框事件监听
  $('.modal').on('show.bs.modal', function() {
    console.log('模态框即将显示', this.id);
  }).on('shown.bs.modal', function() {
    console.log('模态框已显示', this.id);
  }).on('hide.bs.modal', function() {
    console.log('模态框即将隐藏', this.id);
  }).on('hidden.bs.modal', function() {
    console.log('模态框已隐藏', this.id);
  });
});
</script>
{% endblock %} 